<template>
  <div class="home-page">
    <div class="home-page-left">
      <div class="content">
        <div class="title">
          <div class="title-left">
            <span> 数据分析 </span>
          </div>
          <div class="title-right">
            <el-radio-group v-model="radio1" size="small">
              <el-radio-button label="1">个人</el-radio-button>
              <el-radio-button label="2">部门</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="content-box-1">
          <div class="item item-1 cursor-style" @click="toPage('/custom/my')">
            <div class="item-left">
              <div>今日新增客户</div>
              <h5>{{ analysis_data.customer_new || 0 }}</h5>
            </div>
            <img src="../../assets/imgs/icon/icon6.png" alt="" />
          </div>
          <div
            class="item item-2 cursor-style"
            @click="toPage('/opportunity/index')"
          >
            <div class="item-left">
              <div>今日新增商机</div>
              <h5>{{ analysis_data.opportunity_new || 0 }}</h5>
            </div>
            <img src="../../assets/imgs/icon/icon7.png" alt="" />
          </div>
          <div
            class="item item-3 cursor-style"
            @click="toPage('/contract/manage')"
          >
            <div class="item-left">
              <div>今日新增合同</div>
              <h5>{{ analysis_data.contract_new || 0 }}</h5>
            </div>
            <img src="../../assets/imgs/icon/icon8.png" alt="" />
          </div>
          <div class="item item-4">
            <div class="item-left">
              <div>今日新增订单</div>
              <h5>{{ analysis_data.order_new || 0 }}</h5>
            </div>
            <img src="../../assets/imgs/icon/icon9.png" alt="" />
          </div>
        </div>
      </div>
      <div class="content content-2">
        <div class="title">
          <div class="title-left">
            <span> 数据统计 </span>
          </div>
          <div class="title-right">
            <el-radio-group v-model="radio2" size="small">
              <el-radio-button label="1">个人</el-radio-button>
              <el-radio-button label="2">部门</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <!-- 2 -->
        <div class="content-box-2">
          <div class="item cursor-style" @click="toPage('/custom/my')">
            <img src="../../assets/imgs/icon/icon10.png" alt="" />
            <div class="item-right">
              <h5>{{ reports_data.customers || 0 }}</h5>
              <div>当前客户数</div>
            </div>
          </div>
          <div class="item cursor-style" @click="toPage('/custom/my')">
            <img src="../../assets/imgs/icon/icon11.png" alt="" />
            <div class="item-right">
              <h5>{{ reports_data.customer_year || 0 }}</h5>
              <div>新增客户</div>
            </div>
          </div>
          <div class="item cursor-style" @click="toPage('/opportunity/index')">
            <img src="../../assets/imgs/icon/icon12.png" alt="" />
            <div class="item-right">
              <h5>{{ reports_data.opportunities || 0 }}</h5>
              <div>商机</div>
            </div>
          </div>
          <div class="item cursor-style" @click="toPage('/contract/manage')">
            <img src="../../assets/imgs/icon/icon13.png" alt="" />
            <div class="item-right">
              <h5>{{ reports_data.contracts || 0 }}</h5>
              <div>销售合同</div>
            </div>
          </div>
          <div class="item">
            <img src="../../assets/imgs/icon/icon14.png" alt="" />
            <div class="item-right">
              <h5>{{ reports_data.contract_amount || 0 }}</h5>
              <div>合同金额</div>
            </div>
          </div>
          <div class="item cursor-style" @click="toPage('/shopping/order')">
            <img src="../../assets/imgs/icon/icon15.png" alt="" />
            <div class="item-right">
              <h5>{{ reports_data.orders || 0 }}</h5>
              <div>商城订单</div>
            </div>
          </div>
          <div class="item cursor-style" @click="toPage('/shopping/order')">
            <img src="../../assets/imgs/icon/icon16.png" alt="" />
            <div class="item-right">
              <h5>{{ reports_data.order_amount || 0 }}</h5>
              <div>商城订单金额</div>
            </div>
          </div>
          <div class="item">
            <img src="../../assets/imgs/icon/icon17.png" alt="" />
            <div class="item-right">
              <h5>{{ reports_data.receivables || 0 }}</h5>
              <div>回款额</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 3 -->
      <div class="content-box-3">
        <!-- 3-1 -->
        <div class="content">
          <div class="title">
            <div class="title-left">
              <span> 客户拓展排行 </span>
            </div>
            <div class="title-right">
              <el-radio-group v-model="radio3" size="small">
                <el-radio-button label="1">当月</el-radio-button>
                <el-radio-button label="2">年度</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <el-table :data="customer_list" style="width: 100%" heigth="300">
            <el-table-column prop="date" label="排名" align="center" width="80">
              <template #default="scoped">
                <img
                  v-if="scoped.$index == 0"
                  src="../../assets/imgs/icon/icon18.png"
                  alt=""
                />
                <img
                  v-else-if="scoped.$index == 1"
                  src="../../assets/imgs/icon/icon19.png"
                  alt=""
                />
                <img
                  v-else-if="scoped.$index == 2"
                  src="../../assets/imgs/icon/icon20.png"
                  alt=""
                />
                <span v-else>
                  {{ scoped.$index + 1 }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="uname" label="姓名" />
            <el-table-column prop="cnt" label="客户数" />
          </el-table>
        </div>
        <!-- 3-2 -->
        <div class="content">
          <div class="title">
            <div class="title-left">
              <span> 客户成交排行 </span>
            </div>
            <div class="title-right">
              <el-radio-group v-model="radio4" size="small">
                <el-radio-button label="1">当月</el-radio-button>
                <el-radio-button label="2">年度</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <el-table :data="contract_list" style="width: 100%" height="300">
            <el-table-column prop="date" label="排名" align="center" width="80">
              <template #default="scoped">
                <img
                  v-if="scoped.$index == 0"
                  src="../../assets/imgs/icon/icon18.png"
                  alt=""
                />
                <img
                  v-else-if="scoped.$index == 1"
                  src="../../assets/imgs/icon/icon19.png"
                  alt=""
                />
                <img
                  v-else-if="scoped.$index == 2"
                  src="../../assets/imgs/icon/icon20.png"
                  alt=""
                />
                <span v-else>
                  {{ scoped.$index + 1 }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="uname" label="姓名" />
            <el-table-column prop="cnt" label="合同数" />
            <el-table-column prop="amount" label="合同金额" />
          </el-table>
        </div>
      </div>
      <!-- 4 -->
      <div class="content content-box-4">
        <div class="title">
          <div class="title-left">
            <span> 每日订单数据 </span>
          </div>
          <div class="title-right"></div>
        </div>
        <div id="content-box-4"></div>
      </div>
    </div>
    <div class="home-page-right">
      <div class="content content-box-5">
        <div class="title">
          <div class="title-left">
            <span> 待办事项 </span>
          </div>
          <div class="title-right">
            <!-- <span @click="toPage('/index/top')"> 更多>> </span> -->
          </div>
        </div>
        <!-- <el-table
          :show-header="false"
          :data="notice_data"
          style="width: 100%"
          stripe
        >
          <el-table-column prop="name"> </el-table-column>
        </el-table> -->
        <ul>
          <li v-for="item in notice_data" @click="toPage(item.path)">
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="content" style="margin-top: 10px">
        <div class="title">
          <div class="title-left">
            <span> 客户关怀 </span>
          </div>
          <div class="title-right">
            <span @click="toPage('/index/bottom')"> 更多>> </span>
          </div>
        </div>
        <el-table
          :show-header="false"
          :data="indexInfo.contacts || []"
          style="width: 100%"
          stripe
        >
          <el-table-column>
            <template #default="{ row }">
              <img src="../../assets/imgs/icon/icon21.png" alt="" />
              客户联系人 {{ row.name }} ({{ row.customer_name }}) 今日生日。
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  indexApi,
  schdlPlansApi,
  birthdaysApi,
  schdlFollowUpApi,
} from "@/plugins/api/home";
import * as echarts from "echarts";
import { computed } from "vue";
const router = useRouter();
// 首页
let indexInfo = ref({});
function getIndex() {
  indexApi().then((data) => {
    indexInfo.value = { ...data };
    console.log(indexInfo.value);
    noticeFun();
    getEchartsLine("content-box-4", indexInfo.value.charts.x, [
      {
        data: indexInfo.value.charts.total,
        type: "line",
        name: "总收入",
      },
      {
        data: indexInfo.value.charts.order,
        type: "line",
        name: "商城销售",
      },
      {
        data: indexInfo.value.charts.contract,
        type: "line",
        name: "销售金额",
      },
    ]);
  });
}
// -------数据分析
let radio1 = ref("1");
let analysis_data = computed(() => {
  if (radio1.value == "1") {
    return indexInfo.value.analysis?.data || {};
  } else {
    return indexInfo.value.analysis?.dept || {};
  }
});
// -------数据统计
let radio2 = ref("1");
let reports_data = computed(() => {
  if (radio2.value == "1") {
    return indexInfo.value.reports?.data || {};
  } else {
    return indexInfo.value.reports?.dept || {};
  }
});
// -------客户拓展排行
let radio3 = ref("1");
let customer_list = computed(() => {
  if (radio3.value == "1") {
    return indexInfo.value.customer_list?.month || [];
  } else {
    return indexInfo.value.customer_list?.year || [];
  }
});
// -------客户成交排行
let radio4 = ref("1");
let contract_list = computed(() => {
  if (radio4.value == "1") {
    return indexInfo.value.contract_list?.month || [];
  } else {
    return indexInfo.value.contract_list?.year || [];
  }
});
// -------每日订单数据echart
function getEchartsLine(dom, dataX, seriesList) {
  echarts.init(document.getElementById(dom)).dispose();
  const chart = echarts.init(document.getElementById(dom));
  const option = {
    // title: {
    //   text: "本月收入趋势",
    //   left: "5%",
    // },
    dataZoom: [
      //x轴滑动条
      {
        type: "slider",
        show: false,
        xAxisIndex: [0],
        start: 0, //初始化时，滑动条宽度开始标度
        bottom: "1%",
        end: dataX.length > 15 ? 50 : 100,
        height: 10,
        fillerColor: "#3E86FF",
        borderColor: "transparent",
        backgroundColor: "white", //两边未选中的滑动条区域的颜色
        showDataShadow: false, //是否显示数据阴影 默认auto
        showDetail: true, //即拖拽时候是否显示详细数值信息 默认true
      },
    ],
    tooltip: {
      trigger: "axis",
    },
    legend: {
      show: true,
      top: "5%",
      textStyle: {
        color: "#96c0c3",
      },
    },
    grid: {
      left: "2%",
      right: "5%",
      bottom: "2%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: { show: false }, //去掉保存图片设置
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: dataX,
      axisLabel: {
        interval: 0,
        // rotate: 45, //X轴文字倾斜

        // color: "#cadbe3", //X轴文字颜色
        fontSize: "10", //文字大小
      },
      axisLine: {
        lineStyle: {
          color: "#293061", //X轴线颜色
        },
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        // color: "#b7d4e3", //Y轴坐标值文字颜色
      },
      axisTick: {
        lineStyle: {
          color: "#293061", //Y轴字体颜色
        },
      },
      axisLine: {
        show: false,
        lineStyle: {
          type: "dashed",
          color: "#293061", //Y轴字体颜色
        },
      },
      splitLine: {
        //网格线
        show: true,
      },
    },

    series: seriesList,
  };
  window.addEventListener(
    "resize",
    () => {
      chart.resize();
    },
    false
  );
  chart.setOption(option);
}
// -------待办事项
let notice_data = ref([]);
function noticeFun() {
  notice_data.value.push({
    name: `客户跟进提醒：今日计划跟进 (${
      indexInfo.value.notice.followup_today || 0
    })`,
    path: "/index/top?type=1",
  });
  notice_data.value.push({
    name: `新订单提醒：今日商城新订单 (${
      indexInfo.value.notice.order_today || 0
    })`,
    path: "/send/manage/shopping",
  });
  notice_data.value.push({
    name: `发货提醒：今日待发货订单 (${
      indexInfo.value.notice.order_send || 0
    })`,
    path: "/send/manage/sale",
  });
  notice_data.value.push({
    name: `回款提醒：今日计划回款客户 (${
      indexInfo.value.notice.plan_today || 0
    })`,
    path: "/index/top?type=2",
  });
}

// 客户回款提醒
let schdlPlansInfo = ref([]);
function getSchdlPlans() {
  schdlPlansApi().then((data) => {
    schdlPlansInfo.value = [...data];
  });
}
// 客户关怀，客户联系人生日提醒
let birthdaysInfo = ref([]);
function getBirthdays() {
  birthdaysApi().then((data) => {
    birthdaysInfo.value = [...data];
  });
}
// 客户跟进提醒
let schdlFollowUpInfo = ref([]);
function getSchdlFollowUp() {
  schdlFollowUpApi().then((data) => {
    schdlFollowUpInfo.value = [...data];
  });
}
//
function toPage(path) {
  router.push(path);
}

//
onMounted(() => {
  getIndex();
  getSchdlPlans();
  getBirthdays();
  getSchdlFollowUp();
});
</script>
<style scoped lang="scss">
.home-page {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  background: #fafbfc;
  padding: 10px;
  box-sizing: border-box;

  .home-page-left {
    width: 73.5%;
    height: 100%;
    overflow: auto;

    .content-box-1 {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 10px;

      .item {
        width: calc(25% - 10px);
        height: 102px;
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        border-radius: 6px;

        .item-left {
          align-self: center;
          margin-left: 20px;

          > div {
            font-size: 14px;
            color: #676b80;
          }

          h5 {
            margin: 10px 0;
            padding: 0;
            font-size: 26px;
            font-weight: bold;
            color: #2f3543;
          }
        }

        img {
          align-self: center;
          width: 59px;
          height: 59px;
          margin-right: 20px;
        }
      }

      .item-1 {
        background: #f0f5fe;
      }

      .item-2 {
        background: #ebf9ff;
      }

      .item-3 {
        background: #f1efff;
      }

      .item-4 {
        background: #fff6ed;
      }
    }

    .content-box-2 {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 10px;

      .item {
        width: calc(25% - 10px);
        height: 102px;
        display: flex;
        border-radius: 6px;
        border: 1px solid #f0f2fa;
        overflow: hidden;
        border-radius: 6px;
        margin-bottom: 10px;

        .item-right {
          align-self: center;
          margin-left: 20px;

          > div {
            font-size: 14px;
            color: #676b80;
          }

          h5 {
            margin: 10px 0;
            padding: 0;
            font-size: 20px;
            font-weight: 500;
            color: #2f3543;
          }
        }

        img {
          align-self: center;
          width: 59px;
          height: 59px;
          margin-right: 10px;
          margin-left: 20px;
        }
      }
    }

    .content-box-3 {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;

      > div {
        width: calc(50% - 5px);
      }
    }

    .content-box-4 {
      margin-top: 10px;

      #content-box-4 {
        height: 400px;
      }
    }
  }

  .home-page-right {
    width: 26%;
    height: 100%;
    overflow: auto;
  }

  .title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #aaa6a699;
    line-height: 40px;

    .title-left {
      align-self: center;
      margin-left: 10px;

      span {
        font-size: 18px;
        // font-weight: 600;
      }
    }

    .title-right {
      align-self: center;
      margin-right: 10px;

      span {
        font-size: 12px;
        color: #676b80;
        cursor: pointer;
      }
    }
  }

  .content {
    background: white;
    padding: 10px;
    border-radius: 5px;
    box-sizing: border-box;

    .content-box {
    }
  }

  .content-2 {
    margin-top: 10px;
  }

  .content-box-5 {
    ul {
      margin: 0;
      padding: 0;

      li {
        list-style: none;
        background: #f0f1f3;
        margin: 8px 0;
        padding: 10px;
        font-size: 14px;
        color: #172b4d;
        cursor: pointer;

        &:hover {
          transform: scale(0.98);
          transition: all 0.3s;
        }
      }
    }
  }

  .cursor-style {
    cursor: pointer;

    &:hover {
      transform: scale(0.99);
      transition: all 0.5s;
    }
  }
}
</style>
